<template>
  <a-card :bordered="false">
    <!-- 操作按钮区域 -->
    <div class="table-operator">
      <a-button @click="handleAdd" type="primary" icon="plus">新增一级分类</a-button>
    </div>

    <!-- table区域-begin -->
    <div>
      <a-table 
        ref="table" 
        size="middle" 
        rowKey="id" 
        :scroll="{ x: 1300 }"
        :columns="columns" 
        :dataSource="tableData" 
        :loading="loading" 
        :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
        @change="handleTableChange"
        @expand="expand"
      >
        <!--按钮-->
        <span slot="switch" slot-scope="text, record">
          <a-switch
            :default-checked="record.onWx == 0 ? false : true"
            @change="onShowChange(record)"
            @click="onShowClick"
          >
          </a-switch>
          <br>
        </span>
        <!--操作-->
        <span slot="action" slot-scope="text, record" >
          <a-button type="primary" @click="handleEdit(record)" icon="edit"></a-button>
          <a-button type="primary" v-show="record.pid == 0" @click="handleChildren(record)">新增下级</a-button>
          <a-popconfirm title="确定删除吗?" @confirm="() => crudDelete(record.id)" okText="删除" cancelText="取消">
            <a-button type="danger" icon="delete" />
          </a-popconfirm>
        </span>
      </a-table>
    </div>
    <!-- table区域-end -->

    <!-- 表单区域 -->
    <category-modal ref="modalForm" @close="modalClose"></category-modal>
  </a-card>
</template>

<script>
import categoryModal from './modules/categoryModal'
import ApiTree from "@/api/common/category";
import { Slime, crud } from "@/mixins/slime";

export default {
  name: "category",
  mixins: [Slime],
  components: {
    categoryModal
  },
  data() {
    return {
      tableData: [],
      columns: [
        {
          title: "分类名称",
          align: "left",
          dataIndex: "name",
        },
        {
          title: "是否显示在小程序",
          align: "left",
          dataIndex: "onWx",
          scopedSlots: { customRender: 'switch' },
        },
        {
          title: "排序",
          align: "center",
          dataIndex: "sort",
        },
        {
          title: '操作',
          dataIndex: 'action',
          align: 'center',
          scopedSlots: { customRender: 'action' },
        },
      ],
      changeChecked: false,
    };
  },
  created() {
    crud(ApiTree);
    this.loadData();
  },
  methods: {
    // 加载表格数据
    loadData(arg) {
      this.queryParam = {pid:0}
      this.loadDataPack(arg).then((res) => {
        let tableData = [];
        if (res.result) {
          let children = [];
          tableData = res.result.map((obj)=>{
            return obj = { ...obj, children: children };
          })
        }
        this.tableData = tableData;
      });
    },
    handleAdd(){
      this.$refs.modalForm.crudCreate(0,'');
      this.$refs.modalForm.title = '新增类型';
    },
    handleEdit(record){
      let pidName = ''
      if(record.pid != 0){
        this.tableData.map((obj)=>{
          if(obj.id == record.pid){
            pidName = obj.name
          }
        })
      }
      this.$refs.modalForm.crudUpdate(record,record.pid,pidName);
      this.$refs.modalForm.title = '新增类型';
    },
    // 是否显示在小程序
    onShowClick(checked, event){
      this.changeChecked = checked
    },
    onShowChange(record) {
      let that = this;
      setTimeout(()=>{
        let model = Object.assign({}, record)
        model.onWx = this.changeChecked?1:0
        ApiTree.getUpdate(model)
          .then((res) => {
            if (res.success) {
              that.$message.success('提交成功');
              // that.loadData(1);
            } else {
              that.$message.warning(res.message)
            }
          })
          .finally(() => {
            that.confirmLoading = false;
          })
      },50)
    },
    handleChildren(record){
      this.$refs.modalForm.crudCreate(record.id,record.name);
      this.$refs.modalForm.title = '新增子类型';
    },
    // 点击展开
    expand(expanded, record) {
      ApiTree.getList({pid: record.id}).then((res) => {
        let data = res.result;
        const tableData = data.map(function (item) {
          if (item.subCount > 0) {
            let children = [];
            item = { ...item, children: children };
          }
          return item;
        });
        this.childSearch(this.tableData, record.id, tableData);
      });
    },
    // 对于点击展开的对象进行赋值
    childSearch(obj, id, childrenVal) {
      obj.map((item) => {
        if (item.id == id) {
          item.children = childrenVal;
        }
      });
    },
    modalClose(){
      this.$router.go(0)
    },
  },
};
</script>
<style scoped>
</style>